<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn" v-if="isprint"
      >打印预览</el-button
    >
    <div ref="print" id="printArea">
      <div  v-for="(item, index) in dayinlist"  :key="index" class="uls">
          <!-- <div class="hr"></div> -->   
            <!-- <p class="title center_text" style="font-size: 22px;">{{item.biaoqian_name?item.biaoqian_name:Infomation}}</p> -->
            <div class="lis">单号:<span>{{item.order_number}}</span></div>
            <div class="lis">型号:<span>{{item.model_number?item.model_number.model_number:''}}</span></div>
            <div class="lis">规格:<span>{{item.specification?item.specification.specification:""}}</span></div>
            <div class="lis">尺寸:<span>{{item.models_field.size}}</span></div>
            <div class="lis"><vue-qr  :text='"{\"order_id\":"+item.id+"}"' :size="150" class="er_ma"></vue-qr></div>
          <div style="page-break-after: always"></div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      dayinlist: [],
      imageUrl: "",
      strDate: "",
      erweitext: "",
      isprint:true,
      Infomation:''
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    console.log(this.dayinlist)
    this.Infomation=this.$store.getters.Infomation.company_name
    this.currentTime();
  },
  methods: {
    print() {
      this.isprint=false
      this.$print(this.$refs.print);
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
    },
  },
};
</script>
<style scoped>
#printArea {
  width: 100%;
  width: 100mm;
  height: 150mm;
  box-sizing: border-box;
  margin: 0 auto;
  /* border: 1px solid #000; */
  text-align: center;
}

#printArea .uls {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}
#printArea .uls .lis{
  font-size:25px;
  padding: 0 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  text-align: center;
}

#printArea .uls .lis span{
  font-size:66px;
  font-weight: bold;
  text-align: center;
  margin-left: 15px;
}
.er_ma{
  margin: 0 auto;
}
@media print { 
  #printArea {
  width: 100%;
  width: 100mm;
  height: 150mm;
  box-sizing: border-box;
  margin: 0 auto;
  /* border: 1px solid #000; */
}

#printArea .uls {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}
#printArea .uls .lis{
  font-size:25px;
  font-weight: bold;
  display: flex;
  align-items: center;
  text-align: center;
}

#printArea .uls .lis span{
  font-size:66px;
  font-weight: bold;
  text-align: center;
  margin-left: 15px;
}
}
</style>
